<template>
  <v-chart className="chart" :option="option" autoresize />
</template>

<script setup>
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { PieChart } from 'echarts/charts';
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';
  import {ref, toRef} from 'vue';

  use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
  ]);

  const defProp = defineProps({
    name: {
      type: String,
      default: 'echartPie'
    },
    data: {
      type: Array
    }
  });

  const name = toRef(defProp, 'name');
  const data = toRef(defProp, 'data');

  const option = ref({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
      {
        name: name,
        type: 'pie',
        radius: '55%',
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });
</script>

<style scoped>
  .chart {
    height: 100vh;
  }
</style>
